1419: Create card form #1648

f1sh1918 · 2024-09-26T12:01:32Z

Short description

As a user i want to create and activate my koblenz pass

Proposed changes

add extension reference number
improve a11y for extensions in mobile mode for koblenz (add clear button, improve size)
add 3 step form to create, inform and activate a pass
add a new hook to create cards from self service and create pdf separately uses different endpoint and states.
make region optional in pdfs
extend CardBlueprint by SelfServiceCard to make initialization with region optional

Side effects

hopefully none, please test properly also card and pdf creation for nuernberg and bavaria (csv and single)

TODOS

decided to create tests in separate issue, since its getting too big Add tests CardSelfService #1646
DeepLinks are not correct since buildConfig for app is missing Add store links #1647
Store links are missing since they don't exists and may be added to app buildConfig Add store links #1647
There may be also added a help section in the header but its not decided yet
Information about reference number info dialog Add information for reference number dialog #1649
Adjust self service texts Adjust self service texts #1650

Testdata

regionKey,userHash,startDate,endDate,revoked
07111,"$argon2id$v=19$m=19456,t=2,p=1$cr3lP9IMUKNz4BLfPGlAOHq1z98G5/2tTbhDIko35tY",01.01.2024,01.01.2025,false
07111,"$argon2id$v=19$m=19456,t=2,p=1$POG+rDhWlxSW7ItkP9hZRHqr46u6a6TQO1Ib2X+khMA",01.01.2024,01.01.2025,false
07111,"$argon2id$v=19$m=19456,t=2,p=1$zf7vqckgmYBPbjjW1CwqudF+OjHmo2EifgxhuuVHFs0",01.01.2024,01.01.2025,true

Testdata with base information for testing

regionKey,userHash,startDate,endDate,revoked,birthday,referenceNumber
07111,"$argon2id$v=19$m=19456,t=2,p=1$cr3lP9IMUKNz4BLfPGlAOHq1z98G5/2tTbhDIko35tY",01.01.2024,01.01.2025,false, 10.06.2003(12213), 123K
07111,"$argon2id$v=19$m=19456,t=2,p=1$POG+rDhWlxSW7ItkP9hZRHqr46u6a6TQO1Ib2X+khMA",01.01.2024,01.01.2025,false, 10.06.2003(12213), 5.021.025.688
07111,"$argon2id$v=19$m=19456,t=2,p=1$zf7vqckgmYBPbjjW1CwqudF+OjHmo2EifgxhuuVHFs0",01.01.2024,01.01.2025,true, 28.05.2003(12200), 000D000001

Testing (mobile mode)

Import users via curl or postman
Ensure in the backend config selfServiceEnabled: true is set.
curl -F file=@import_testdata_local.csv http://0.0.0.0:8000/users/import
go to http://localhost:3000/ and select Koblenz
Go to http://localhost:3000/erstellen
Use the infos from the "Testdata with base information" and type in the data in the form. Note that the name will not be hashed, so you can choose whatever you want.
Check if the pass can be created and check error message if the infos in the form were not matching
Store Links are not defined yet so klick "Zur Aktivierung"
Try to download the pdf and check the details
Klick on activate card will not work since app buildConfig is missing.

Resolved issues

Fixes: #1419
Fixes: #1420

…, add error handling, override isValid() for SelfServiceCard to allow undefined expirationDate

f1sh1918 · 2024-09-26T12:26:02Z

administration/src/Router.tsx

@@ -60,6 +61,7 @@ const Router = () => {
            { path: '/antrag-einsehen/:accessKey', element: <ApplicationApplicantController /> },
          ]
        : []),
+      ...(projectConfig.selfServiceEnabled ? [{ path: '/erstellen', element: <CardSelfServiceView /> }] : []),


maybe there are some ideas for a better route name

We currently have a mix of english and german path names 🙄

Just a general though: Maybe it would make sense to have an project id or project abbreviation in paths? so it is for us also clear this "erstellen" path only applies to koblenz. e.g. /koblenz/erstellen or /ko/erstellen or /4/erstellen.

Good point.
The issue here is that we then have on production
koblenz.sozialpass.app/koblenz/erstellen which makes no sense

the projectId can not be hardcoded in the projectConfig since it is created by the backend, but would have to be retrieved from the api which is difficult because we need to call the api before executing the router.

But you are right, we might have to discuss this

administration/src/bp-modules/cards/AddCardsForm.tsx

administration/src/project-configs/koblenz/activationText.tsx

ztefanie · 2024-09-30T09:17:31Z

Just one thing i find: If you have a birthday on the default date and do not touch the date picker it says that the data is not valid. So it should either have no default or accept that the default is a valid input. But this is minor as not many people will have birhtday on this exact date

f1sh1918 · 2024-10-01T08:53:08Z

Just one thing i find: If you have a birthday on the default date and do not touch the date picker it says that the data is not valid. So it should either have no default or accept that the default is a valid input. But this is minor as not many people will have birhtday on this exact date

Thx for the hint. Unfortunately the styling of the mui textfield placeholders is really horrible since they use this placeholder label mechanism which we currently don't use
Example: https://mui.com/material-ui/react-text-field/#basic-textfield

Maybe its a ok compromise to set an initial date like this and use placeholder color (in fact the state is still null so behind the scenes this value is not really set for a card)

…d test for windows dimension hook, fix margin of tooltip, add todos

# Conflicts: # administration/src/bp-modules/cards/AddCardForm.tsx # administration/src/cards/PdfFactory.ts # administration/src/cards/extensions/BirthdayExtension.tsx # administration/src/project-configs/koblenz/dataPrivacyBase.tsx

ztefanie

If entering wrong data i get the response "Server nicht erreichbar". This is the wrong error message. It is related to this issue: #1660

I do not like the error message about missing data being initaliy displayed and i think this is not state-of-the-art, most websites only show errors once you try submitting. Also the red error border is not nice, when initically opening the site.

The form is jumping when scrolling down completely and then entering the data. (see attached video)

1419.mp4

can you please add the example csv to the code base (administration/resources)

I was not able to create a card. I did import the csv successfully, but the correct data led to an error 404 Not Found- no body was set

Did not fully review, as i cannot proceed with testing properly because of this error.

ztefanie · 2024-10-02T08:29:51Z

administration/src/Router.tsx

@@ -60,6 +61,7 @@ const Router = () => {
            { path: '/antrag-einsehen/:accessKey', element: <ApplicationApplicantController /> },
          ]
        : []),
+      ...(projectConfig.selfServiceEnabled ? [{ path: '/erstellen', element: <CardSelfServiceView /> }] : []),


We currently have a mix of english and german path names 🙄

Just a general though: Maybe it would make sense to have an project id or project abbreviation in paths? so it is for us also clear this "erstellen" path only applies to koblenz. e.g. /koblenz/erstellen or /ko/erstellen or /4/erstellen.

ztefanie · 2024-10-02T08:31:29Z

administration/src/assets/koblenz_logo.svg

I also added this file to frontend assets. Do we add our assets duplicated on adminstration and frontend. Does this make sense? 🤔

we have currently no mechanism to exchange assets between frontend and administration. I can not directly import assets from frontend. In general one source would make sense for sure

administration/src/bp-modules/self-service/CardSelfServiceActivation.tsx

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx

ztefanie · 2024-10-03T06:46:14Z

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx

+  generateCards: () => Promise<void>
+}
+
+const getTooltipMessage = (cardsValid: boolean, dataPrivacyAccepted: boolean): string => {


I think the handling of errors is quite inconsistent:

only the checkbox-error/missing Datenschutzerklärung is displayed on the bottom, the other things are only displayed by a red border, which i think is not enough. There should be a message why this data is not correct.
The error message should only be displayed after "Pass erstellen" was clicked.

i know the design is a bit inconsistent here, too

also the design is very different from the flow we have in the application form, there we have the button enabled and then show errors once the button is clicked, which i think is state-of-the-art. In the design on the initial view no error messages are displayed, which i think should be the case, but of course cannot be realized with the disabled button.

i already created an issue that we need sth like an untouched state for this
#1664

ztefanie · 2024-10-03T06:47:32Z

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx

+            rightElement={
+              <ClearInputButton viewportSmall={viewportSmall} onClick={clearNameInput} input={card.fullName} />
+            }
+            intent={card.isFullNameValid() ? undefined : Intent.DANGER}


Name input should only be valid if first and lastname is entered and both is at least 2 or 3 chars long. Otherwise people may only input their lastname and share the pass with relatives.

added this task also to #1670 since we need then a hint for that

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx

f1sh1918 · 2024-10-03T10:20:11Z

If entering wrong data i get the response "Server nicht erreichbar". This is the wrong error message. It is related to this issue: #1660

I do not like the error message about missing data being initaliy displayed and i think this is not state-of-the-art, most websites only show errors once you try submitting. Also the red error border is not nice, when initically opening the site.

The form is jumping when scrolling down completely and then entering the data. (see attached video)

1419.mp4
can you please add the example csv to the code base (administration/resources)

I was not able to create a card. I did import the csv successfully, but the correct data led to an error 404 Not Found- no body was set

Did not fully review, as i cannot proceed with testing properly because of this error.

For me the "server nicht erreichbar" issue doesn't appear. If i'm entering wrong data i get a correct error message. Even this error message should be shown in the alert box not as a toast. Will adjust that.
Probably you have to enable selfServiceEnabled: true in your config.local.yml
I added this to testing instructions.

For routing names we have the issue that we use german names for the routes of end user of the card and english for the service users. I just continued this. Since most of the links are used somewhere like Freinet or Care4 or linked by cities, its not that easy to stick to a general conventions. we could create redirects for these routes and keep everything in english. Not sure what is the best solution

administration/src/project-configs/koblenz/activationText.tsx

administration/src/cards/extensions/components/ClearInputButton.tsx

administration/src/cards/SelfServiceCard.ts

administration/src/bp-modules/self-service/CardSelfServiceActivation.tsx

administration/src/cards/extensions/BirthdayExtension.tsx

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx

administration/src/bp-modules/self-service/CardSelfServiceView.tsx

steffenkleinle · 2024-10-07T10:37:27Z

I think it would be cool if there wouldn't be too many/big changes here anymore and further improvement could be done in separate PRs/issues instead due to my refactoring in #1667.

seluianova

'Clear' button doesn't work in the calendar.
It is also not possible to delete an input with backspace.
Minor but a bug.
(I can create a separate tiket for that, if we want to fix such things separately, let me know)

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx

administration/src/project-configs/koblenz/dataPrivacyBase.tsx

seluianova

very much minor and probably optional, but:
when a user opens a form, they immediately see validation errors, but they haven't touched anything yet.
I think ideally the validation should be run after the user enters something.

f1sh1918 · 2024-10-07T14:13:38Z

very much minor and probably optional, but:
when a user opens a form, they immediately see validation errors, but they haven't touched anything yet.
I think ideally the validation should be run after the user enters something.

There is already an open issue for implementing an untouched state.

f1sh1918 · 2024-10-07T14:16:58Z

'Clear' button doesn't work in the calendar.
It is also not possible to delete an input with backspace.
Minor but a bug.
(I can create a separate tiket for that, if we want to fix such things separately, let me know)

Yes you can do that. With the current mui implementation this will be pretty difficult since there are lots of design issues if we use a real placeholder instead of initial value. That's also why clearance is not implemented. Even I think it has less value for a date picker than for text input field

f1sh1918 · 2024-10-07T14:19:41Z

I think it would be cool if there wouldn't be too many/big changes here anymore and further improvement could be done in separate PRs/issues instead due to my refactoring in #1667.

Yes I created couple of issues for improvement.
Even some design things are not 100% clear so i think it's fine here to have a first working solution

steffenkleinle

Works as expected if you actually follow the testing instructions 🤦

…add TODO

f1sh1918 · 2024-10-09T10:44:25Z

@ztefanie can you please recheck or at least remove your changes requested to unblock this pr

# Conflicts: # administration/src/project-configs/koblenz/dataPrivacyBase.tsx

Outdated and blocking merging

f1sh1918 added 5 commits September 18, 2024 17:31

1617: remove pipeline name

7d6ec5c

1419: add activation screen, add a controller

d5fd84b

1419: make region optional in pdf, remove region from mutation return…

a916f63

…, add error handling, override isValid() for SelfServiceCard to allow undefined expirationDate

Merge remote-tracking branch 'origin/main' into 1419-create-card-form

7eef65d

1419: implement new design

da33e63

f1sh1918 commented Sep 26, 2024

View reviewed changes

administration/src/bp-modules/cards/AddCardsForm.tsx Show resolved Hide resolved

f1sh1918 commented Sep 26, 2024

View reviewed changes

administration/src/project-configs/koblenz/activationText.tsx Show resolved Hide resolved

f1sh1918 force-pushed the 1419-create-card-form branch 2 times, most recently from 2e778d7 to fb46a4f Compare September 26, 2024 12:52

f1sh1918 marked this pull request as ready for review September 26, 2024 12:57

f1sh1918 requested review from steffenkleinle, ztefanie and seluianova as code owners September 26, 2024 12:57

f1sh1918 marked this pull request as draft September 30, 2024 08:16

1419: add store icon, simplify cardState, add reusable components, ad…

7ae5d82

…d test for windows dimension hook, fix margin of tooltip, add todos

f1sh1918 force-pushed the 1419-create-card-form branch from fb46a4f to 7ae5d82 Compare October 1, 2024 08:55

f1sh1918 force-pushed the 1419-create-card-form branch from cfb7dd0 to fd2a124 Compare October 1, 2024 09:41

f1sh1918 marked this pull request as ready for review October 1, 2024 09:41

1419: fix types

1ef5a0f

f1sh1918 force-pushed the 1419-create-card-form branch from fd2a124 to 1ef5a0f Compare October 1, 2024 11:18

ztefanie previously requested changes Oct 3, 2024

View reviewed changes

steffenkleinle reviewed Oct 5, 2024

View reviewed changes

steffenkleinle approved these changes Oct 7, 2024

View reviewed changes

seluianova reviewed Oct 7, 2024

View reviewed changes

administration/src/bp-modules/self-service/CardSelfServiceForm.tsx Outdated Show resolved Hide resolved

seluianova reviewed Oct 7, 2024

View reviewed changes

administration/src/project-configs/koblenz/dataPrivacyBase.tsx Outdated Show resolved Hide resolved

seluianova reviewed Oct 7, 2024

View reviewed changes

seluianova mentioned this pull request Oct 7, 2024

Improve the Geburtsdatum field in the card creation form #1672

Open

1419: minor refactoring, add test data to resources

28b349a

steffenkleinle approved these changes Oct 8, 2024

View reviewed changes

f1sh1918 requested review from ztefanie and seluianova October 8, 2024 12:12

seluianova approved these changes Oct 9, 2024

View reviewed changes

f1sh1918 and others added 2 commits October 9, 2024 12:42

1419: use placeholder for birthday, remove minDate since not needed, …

7a494e3

…add TODO

Merge branch 'main' into 1419-create-card-form

6048c3f

Merge remote-tracking branch 'origin/main' into 1419-create-card-form

959788f

# Conflicts: # administration/src/project-configs/koblenz/dataPrivacyBase.tsx

f1sh1918 merged commit f56d75c into main Oct 9, 2024
1 check passed

f1sh1918 deleted the 1419-create-card-form branch October 9, 2024 12:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1419: Create card form #1648

1419: Create card form #1648

f1sh1918 commented Sep 26, 2024 •

edited

Loading

f1sh1918 Sep 26, 2024

ztefanie Oct 2, 2024

f1sh1918 Oct 9, 2024

ztefanie commented Sep 30, 2024

f1sh1918 commented Oct 1, 2024

ztefanie left a comment

ztefanie Oct 2, 2024

ztefanie Oct 2, 2024

f1sh1918 Oct 8, 2024

ztefanie Oct 3, 2024

f1sh1918 Oct 3, 2024 •

edited

Loading

ztefanie Oct 3, 2024

f1sh1918 Oct 8, 2024

f1sh1918 commented Oct 3, 2024 •

edited

Loading

steffenkleinle commented Oct 7, 2024

seluianova left a comment •

edited

Loading

seluianova left a comment

f1sh1918 commented Oct 7, 2024

f1sh1918 commented Oct 7, 2024

f1sh1918 commented Oct 7, 2024

steffenkleinle left a comment

f1sh1918 commented Oct 9, 2024

1419: Create card form #1648

1419: Create card form #1648

Conversation

f1sh1918 commented Sep 26, 2024 • edited Loading

Short description

Proposed changes

Side effects

TODOS

Testdata

Testdata with base information for testing

Testing (mobile mode)

Resolved issues

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ztefanie commented Sep 30, 2024

f1sh1918 commented Oct 1, 2024

ztefanie left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f1sh1918 Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f1sh1918 commented Oct 3, 2024 • edited Loading

steffenkleinle commented Oct 7, 2024

seluianova left a comment • edited Loading

Choose a reason for hiding this comment

seluianova left a comment

Choose a reason for hiding this comment

f1sh1918 commented Oct 7, 2024

f1sh1918 commented Oct 7, 2024

f1sh1918 commented Oct 7, 2024

steffenkleinle left a comment

Choose a reason for hiding this comment

f1sh1918 commented Oct 9, 2024

f1sh1918 commented Sep 26, 2024 •

edited

Loading

f1sh1918 Oct 3, 2024 •

edited

Loading

f1sh1918 commented Oct 3, 2024 •

edited

Loading

seluianova left a comment •

edited

Loading